<script setup lang="ts">
import { ref, onMounted, defineEmits } from "vue";
import { updateCourseware, GetCoursewareFolderList } from "@/api/lms";

const emit = defineEmits(["onSearchEnv"]);
const onSearchTable = () => {
  emit("onSearchEnv");
};

const coursewareForm = ref({
  id: "",
  code: "",
  fileName: "",
  label: "",
  coursewareFolderId: "",
  allowDownload: false,
  isPublic: false
});
const dialogVisible = ref(false);

const showdialogForEdit = (e: any) => {
  coursewareForm.value = {
    id: e.id,
    code: e.code,
    fileName: e.name,
    label: e.label,
    coursewareFolderId: e.coursewareFolderId,
    allowDownload: e.allowDownload,
    isPublic: e.isPublic
  };
  dialogVisible.value = true;
};

const folderList = ref<any>([]);

onMounted(() => {
  GetCoursewareFolderList().then(res => {
    const li = [];
    res.forEach(item => {
      li.push({
        label: item.name,
        value: item.folderId
      });
      folderList.value = li;
    });
  });
});

const onSubmit = () => {
  console.log(coursewareForm.value);
  updateCourseware(coursewareForm.value).then(() => {
    onSearchTable();
    dialogVisible.value = false;
  });
};

defineExpose({
  showdialogForEdit
});
</script>

<template>
  <el-dialog v-model="dialogVisible" title="修改课件信息">
    <el-form ref="elForm" :model="coursewareForm" label-width="100px">
      <el-form-item label="课件编号">
        <el-input
          v-model="coursewareForm.code"
          placeholder="请输入课件编号"
          :maxlength="20"
          show-word-limit
          clearable
        />
      </el-form-item>
      <el-form-item label="素材名称">
        <el-input
          v-model="coursewareForm.fileName"
          placeholder="请输入课件名称"
          :maxlength="20"
          show-word-limit
          clearable
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="标签">
        <el-input
          v-model="coursewareForm.label"
          placeholder="请输入标签"
          :maxlength="20"
          show-word-limit
          clearable
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="课件目录">
        <el-select
          v-model="coursewareForm.coursewareFolderId"
          placeholder="请选择素材所属课件目录"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in folderList"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="允许下载">
        <el-radio-group v-model="coursewareForm.allowDownload">
          <el-radio :label="true" :value="true">允许下载</el-radio>
          <el-radio :label="false" :value="false">禁止下载</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否公开">
        <el-radio-group v-model="coursewareForm.isPublic">
          <el-radio :label="true" :value="true">公开</el-radio>
          <el-radio :label="false" :value="false">不公开</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped></style>
